<template>
  <div class='home'>
    <!-- 导航条 -->
    <van-nav-bar title="在线点餐" fixed />
    <!-- 搜索框 -->
    <van-search shape="round" show-action background="#f1f1f2" v-model="keyWord" placeholder="请输入搜索关键词"
      @search="onSearch" />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>
    <div class="layout">
      <!-- 左侧分类栏 -->
      <div class="left">
        <van-sidebar v-model="activeKey" style="background-color: black;">
          <van-sidebar-item v-for="category in categoryList" :key="category.id" :title="category.categoryName"
            @click="handleClick(category)" />
        </van-sidebar>
      </div>
      <!-- 右侧为该分类下的菜品 -->
      <div class="right">
        &nbsp;<span style="font-size: 14px;">{{ category.categoryName }}(<span style="font-size: 12px;color: rgba(0, 0, 0, 0.9)">{{ category.description }}</span>)</span>
        <div class="dish" v-if="dishList.length > 0" style="margin-top: 20px;">
          <DishItemOfList v-for="item in dishList" :key="item.id" :item="item"></DishItemOfList>
        </div>
        <div class="setmeal" v-if="setmealList.length > 0" style="margin-top: 20px;">
          <SetmealItemOfList v-for="item in setmealList" :key="item.id" :item="item"></SetmealItemOfList>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import request from '@/utils/request'
import DishItemOfList from '@/components/DishItemOfList'
import SetmealItemOfList from '@/components/SetmealItemOfList'

export default {
  name: 'HomeIndex',
  // import引入的组件需要注入到对象中才能使用
  components: {
    DishItemOfList,
    SetmealItemOfList
  },
  data () {
  // 这里存放数据
    return {
      keyWord: '',
      activeKey: 0,
      baseCategory: '/category-basic',
      baseDish: '/dish-basic',
      baseSetmeal: '/setmeal-basic',
      categoryList: [],
      dishList: [],
      setmealList: [],
      images: [
        'http://192.168.22.1:5003/uploads/1.jpg',
        'http://192.168.22.1:5003/uploads/2.jpg',
        'http://192.168.22.1:5003/uploads/3.jpg',
        'http://192.168.22.1:5003/uploads/4.jpg'
      ],
      category: {}
    }
  },
  // 监听属性 类似于data概念
  computed: {
  },
  // 监控data中的数据变化
  watch: {
  },
  // 方法集合
  methods: {
    // 获取分类列表
    async searchCategoryByConditions () {
      // 执行查询操作
      await request({
        url: this.baseCategory + '/category-list/1/100',
        method: 'get'
      }).then(result => {
        if (result.data.data.data != null) {
          // 查询成功执行操作
          this.categoryList = result.data.data.data
        } else {
          this.$message({
            message: '分类列表查询失败',
            type: 'error'
          })
        }
      }).catch(error => {
        this.$message({
          message: '分类列表查询失败',
          type: 'error'
        })
        console.log(error)
      })
    },
    // 通过分类获取菜品或是套餐列表
    async getGoodsByCategoryId (category) {
      this.category = category
      if (category.type === 1) {
        // 请求菜品
        await request({
          url: this.baseDish + '/dish-list/1/100',
          method: 'get',
          params: {
            categoryId: category.id,
            status: 1
          }
        }).then(result => {
          this.dishList = result.data.data.data
          // 清除查询输入框数据
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '查询失败'
          })
        })
      } else {
        // 请求套餐
        await request({
          url: this.baseSetmeal + '/setmeal-list/1/100',
          method: 'get',
          params: {
            categoryId: category.id,
            status: 1
          }
        }).then(result => {
          this.setmealList = result.data.data.data
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '查询失败'
          })
        })
      }
    },
    // 初始化点餐首页
    async initData () {
      await this.searchCategoryByConditions()
      await this.getGoodsByCategoryId(this.categoryList[0])
    },
    // 切换分类
    async handleClick (category) {
      this.dishList = []
      this.setmealList = []
      await this.getGoodsByCategoryId(category)
    },
    // 输入关键字点击回车后进入商品列表
    onSearch () {
      this.$router.push({
        name: 'SearchList',
        params: {
          keyWord: this.keyWord
        }
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    // 首页加载分类
    this.initData()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
/**
 * 主题 padding
 */
.home {
  padding-top: 70px;
  padding-bottom: 50px;
}

.home .layout {
  display: flex;
}

.home .layout .right {
  flex: 1;
  margin-top: 20px;
  margin-left: 20px;
  height: 500px;
  overflow: scroll;
}

/**
 * 导航条样式定制
 */
.van-nav-bar {
  z-index: 999;
  background-color: #c21401;
  ::v-deep .van-nav-bar__title {
    color: #fff;
  }
}
/**
 * 搜索框样式定制
 */
.van-search {
  position: fixed;
  width: 100%;
  top: 46px;
  z-index: 999;
}

.my-swipe .van-swipe-item {
    margin-top: 30px;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    height: 200px;
    text-align: center;
    background-color: #39a9ed;

    img {
      width: 100%;
      height: 100%;
    }
}
</style>
